<template>
  <div class="home-page">
    <h1 class="page-title">欢迎使用AI代码生成器</h1>
    <p class="page-description">
      这是一个强大的AI驱动的代码生成工具，可以帮助您快速生成各种编程语言的代码片段和完整项目。
    </p>
    <div class="feature-cards">
      <div class="feature-card">
        <h3>智能代码生成</h3>
        <p>基于最新的AI模型，根据您的需求生成高质量代码</p>
      </div>
      <div class="feature-card">
        <h3>多语言支持</h3>
        <p>支持Python、JavaScript、Java、C++等多种编程语言</p>
      </div>
      <div class="feature-card">
        <h3>代码优化</h3>
        <p>不仅生成代码，还能优化现有代码，提升性能和可读性</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 首页组件，展示应用的主要功能和介绍
</script>

<style scoped>
.home-page {
  text-align: center;
  padding: 40px 20px;
}

.page-title {
  font-size: 2.5em;
  color: #1890ff;
  margin-bottom: 20px;
}

.page-description {
  font-size: 1.2em;
  color: #595959;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.feature-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.feature-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.feature-card h3 {
  color: #1890ff;
  margin-bottom: 15px;
  font-size: 1.5em;
}

.feature-card p {
  color: #666666;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2em;
  }
  
  .page-description {
    font-size: 1em;
  }
  
  .feature-cards {
    flex-direction: column;
    align-items: center;
  }
  
  .feature-card {
    max-width: 100%;
  }
}
</style>